<template>
	<div class="parameter  flex unified-flex-space-around">
		<div class="params unified-bg-white flex unified-flex-align unified-flex-space-between"
			v-for="(item,index) in template" :key="index">

			<div class=" flex unified-flex-align">
				<!-- 自定义新增参数 -->
				<input v-if="item.template_found==1" class="Key custom unified-transition" type="text"
					placeholder="参数名称" v-model="item.template_name" />

				<!-- 模板参数 -->
				<span v-else class="parameterItem-title unified-cursor-default"> {{item.template_name}} </span>

			</div>

			<div>
				
				<input class="parameterItem-value unified-transition" :type="item.template_type"
					v-model="item.template_default" 
					v-if="item.template_type=='number' || item.template_type=='text' || item.template_type=='password'"
					
					
					>

				<select v-else-if="item.template_type == 'select'">
					<option value="你好" v-for="(secItem,index) in item.template_default" :key="index"
						:selected="item.select_index==index?'selected':'none'">{{secItem}}</option>
				</select>

				<div  
					style="font-size:8px; color: #E1251B; font-weight: bold;"
					@click="remove(index)" 
					class="el-icon-delete parameterItem-title">
				</div>
			</div>

		</div>
		
		<div class="params unified-bg-white addParams">
			
			添加参数
		</div>
		
	</div>
</template>

<script>
	// 如果是必填的参数,那么是不可以删除,即删除按钮被隐藏
	export default {
		props: {
			template: {
				type: Array,
				default () {
					return []
				}
			},
			edit: { // 是否为编辑模式
				type: Boolean,
				default: false
			}
		},
		data() {
			return {}
		},
		methods: {
			remove(index) {
				this.$emit("remove", index)
			},
			check() {




			}
		}
	}
</script>

<style scoped="scoped">
	.parameter {
		width: 100%;
		flex: 1;
		background-color: #C3C3C388;
		margin-top: 0px;
		flex-wrap: wrap;
		align-content: flex-start;
		padding: 20px 10px;
		box-sizing: border-box;
	}

	input {
		background-color: transparent;
	}

	.Key {
		outline: none;
		border: none;
		margin-left: 8px;
		appearance: none;
	}

	.custom {
		height: 25px;
		line-height: 25px;
		text-indent: 6px;
		border-radius: 6px;
		font-size: 8px;
		width: 140px;
		border: 1px solid #C3C3C388;
	}

	.custom:focus {
		border: 1px solid #2269F3;
	}

	.params {
		width: 48%;
		border-radius: 10px;
		font-size: 12px;
		margin-bottom: 14px;
		height: 60px;
		line-height: 60px;
		padding: 0px 25px;
		padding-left: 15px;
		box-sizing: border-box;
	}

	.parameterItem-title {
		font-size: 14px;
		color: #000;
		margin-left: 8px;
	}

	.parameterItem-value {
		font-size: 8px;
		color: #82939C;
		height: 28px;
		outline: none;
		border: none;
		border: 1px solid #C3C3C388;
		/* text-align: right; */
		height: 25px;
		line-height: 25px;
		border-radius: 6px;
		font-size: 8px;
		width: 140px;
	}

	.parameterItem-value:focus {
		/* text-align: left; */
		border: 1px solid #2269F3;
	}


	.parameterItem-value[disabled="disabled"] {
		/* background-color: transparent;
		border: none; */
	}

	select {
		outline: none;
		border: 1px solid #c3c3c344;
		border-radius: 15px;
		/* width: auto; */
		text-align: center;
		padding: 0px 15px;
		/* background-color: #0081FF; */
		height: 30px;
		appearance: none;
		-webkit-appearance: none;
	}

	select option {
		text-align: center;
	}

	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}
</style>
